2016年我写过一篇文章如何使用SVG图标，其“试验性部分”的结语是个警告 - “抱歉，渐变填充无法工作”。

我指的是像fill: linear-gradient(red, blue)一样的无效代码，因为fill属性出自SVG - 该元素内置了独有的渐变支持；而linear-gradient则源自CSS，常用于设置背景。二者的结合效果并不理想。

我可以使用SVG的元素，但之前并未尝试过。几个月后我做了试验，效果还算不错。下面请看分享。

我发现最值得信赖的方式是在HTML页面中添加SVG元素(例如在标签的开始或结束位置添加)。这里应该定义一个。

这个元素不推荐用display:none实现隐藏效果，这样的话某些浏览器会忽略渐变效果。把元素高度设为0px来实现隐藏效果是可行的。

现在我们可以在SVG图标上使用渐变效果了:

或者在CSS里这样写:

下面这两个图标应该使用了松石绿-深蓝的渐变。示例：Leaf by Gabriele Malaspina , Carpet by Ben Davis

不过我们无法定制单个按钮的渐变。如果想这样做，需要在HTML中创建不同的SVG渐变定义。

如果我们想用CSS设置渐变色，可以通过CSS变量来实现。我们将使用CSS自定义属性来编写渐变定义(var(--my-custom-property)).

现在我们可以设置 - 如果需要的话 - 在CSS中还能改变这些颜色:

最后，用这些效果来填充图标:

下面是浏览器的支持度(浏览器对CSS自定义属性的支持程度):

使用SVG渐变填充和CSS变量测试图标：

渐变填充会绘制图标的每条路径。为了避免颜色衔接不当(譬如叶子和茎的连接处)，把图标的源SVG所有路径或大部分路径合并可能有效果。

这个技巧在FireFox中被证实有效，也曾适用于Edge(Edge14,15确认可用，但Edge16和预览版又取消了支持)。请看下面的测试:

不支持此项操作的浏览器(Chrome,Safari,最新版Edge...)应该为第二个图标展示一个红色的替代填充效果。

如果我告诉你可以在SVG中定义渐变之后把SVG作为数据URL放在CSS中，你会怎么想? 好吧我承认是在犯傻，可它真的可以实现! 至少在Firefox中可以:P

看到我们如何在URL的结尾用#grad引用渐变效果的id了吗？目前看来只有Firefox能理解这个语法。额，太遗憾了不是吗。

这个例子打算实现一个品红色-紫色渐变效果。不支持此操作的浏览器(Chrome,Safari,Edge...)应该会展示一个紫色的备用填充效果。

假如你需要大量渐变效果，这个技巧可能不适合你。因为在HTML中创建10个或20个不同的SVG渐变并不实用。但对于简单需求而言，这个技巧在所有现代浏览器中均可使用(如果我们放弃CSS变量的话，IE11也在支持的浏览器之列)。